import { useState } from 'react';
const Search = () => {
    const [search, setSearch] = useState<string>('');
    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearch(e.target.value);
    }
    return (
        <>
            <div className="m-3 mt-5 h-16 bg-gray-200 flex items-center rounded-sm p-1 box-border">
                <span className="text-2xl text-gray-500 icon-[mdi--search] ml-2.5"></span>
                <input type="text" className="w-full h-full bg-transparent outline-none ml-2" placeholder="Search" value={search} onChange={handleSearchChange} />
                {
                    search.length > 0 && <span className="icon-[mdi--close-circle] text-gray-400 ml-2.5 mr-2.5" onClick={() => setSearch('')}></span>
                }
            </div>
        </>
    );
}

export default Search;